'use client';

import React from 'react';
import {
  Box,
  Typography,
  Paper,
  Container,
  Grid,
  Card,
  CardContent,
  CardHeader,
  Button,
  Divider,
  List,
  ListItem,
  ListItemText,
  Chip,
} from '@mui/material';
import { useAuth } from '@/app/providers';
import Navbar from '@/components/Navbar';

export default function BillingPage() {
  const { user } = useAuth();

  // 模拟账单数据
  const billingInfo = {
    currentPlan: '免费会员',
    nextBillingDate: '无',
    paymentMethod: '无',
    billingHistory: [
      {
        id: 1,
        date: '2023-12-01',
        amount: '¥0',
        status: '已完成',
        description: '免费会员',
      },
    ],
  };

  // 会员计划
  const plans = [
    {
      title: '免费会员',
      price: '¥0',
      period: '永久',
      features: ['基本个人资料', '校友目录访问', '参与公开活动'],
      current: true,
    },
    {
      title: '高级会员',
      price: '¥99',
      period: '年',
      features: [
        '高级个人资料',
        '完整校友目录',
        '专属活动邀请',
        '职业发展资源',
        '校友企业优惠',
      ],
      current: false,
    },
    {
      title: '终身会员',
      price: '¥999',
      period: '一次性',
      features: [
        '所有高级会员特权',
        '终身访问权限',
        'VIP活动优先参与',
        '校友会决策参与',
        '专属纪念品',
      ],
      current: false,
    },
  ];

  return (
    <Box sx={{ bgcolor: 'background.default', minHeight: '100vh' }}>
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          账单与会员
        </Typography>

        {/* 当前会员信息 */}
        <Paper sx={{ p: 3, mb: 4 }}>
          <Typography variant="h6" gutterBottom>
            当前会员
          </Typography>
          <Grid container spacing={2}>
            <Grid item xs={12} md={4}>
              <Typography variant="body1" color="text.secondary">
                会员类型
              </Typography>
              <Typography variant="body1" fontWeight="bold">
                {billingInfo.currentPlan}
              </Typography>
            </Grid>
            <Grid item xs={12} md={4}>
              <Typography variant="body1" color="text.secondary">
                下次扣款日期
              </Typography>
              <Typography variant="body1" fontWeight="bold">
                {billingInfo.nextBillingDate}
              </Typography>
            </Grid>
            <Grid item xs={12} md={4}>
              <Typography variant="body1" color="text.secondary">
                支付方式
              </Typography>
              <Typography variant="body1" fontWeight="bold">
                {billingInfo.paymentMethod}
              </Typography>
            </Grid>
          </Grid>
        </Paper>

        {/* 会员计划 */}
        <Typography variant="h5" gutterBottom sx={{ mt: 4, mb: 2 }}>
          会员计划
        </Typography>
        <Grid container spacing={3}>
          {plans.map((plan) => (
            <Grid item xs={12} md={4} key={plan.title}>
              <Card
                sx={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  ...(plan.current && {
                    border: '2px solid',
                    borderColor: 'primary.main',
                  }),
                }}
              >
                <CardHeader
                  title={plan.title}
                  titleTypographyProps={{ align: 'center', variant: 'h6' }}
                  sx={{
                    backgroundColor: plan.current ? 'primary.light' : 'grey.100',
                  }}
                  action={
                    plan.current && (
                      <Chip
                        label="当前计划"
                        color="primary"
                        size="small"
                        sx={{ mt: 1 }}
                      />
                    )
                  }
                />
                <CardContent sx={{ flexGrow: 1 }}>
                  <Box
                    sx={{
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'baseline',
                      mb: 2,
                    }}
                  >
                    <Typography component="h2" variant="h4" color="text.primary">
                      {plan.price}
                    </Typography>
                    <Typography variant="subtitle1" color="text.secondary">
                      /{plan.period}
                    </Typography>
                  </Box>
                  <Divider sx={{ my: 2 }} />
                  <List dense>
                    {plan.features.map((feature) => (
                      <ListItem key={feature} sx={{ py: 0.5 }}>
                        <ListItemText primary={feature} />
                      </ListItem>
                    ))}
                  </List>
                  <Box sx={{ mt: 2, textAlign: 'center' }}>
                    <Button
                      variant={plan.current ? 'outlined' : 'contained'}
                      color="primary"
                      disabled={plan.current}
                    >
                      {plan.current ? '当前计划' : '升级'}
                    </Button>
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>

        {/* 账单历史 */}
        <Typography variant="h5" gutterBottom sx={{ mt: 4, mb: 2 }}>
          账单历史
        </Typography>
        <Paper sx={{ width: '100%', overflow: 'hidden' }}>
          <List>
            {billingInfo.billingHistory.map((bill) => (
              <React.Fragment key={bill.id}>
                <ListItem
                  secondaryAction={
                    <Chip
                      label={bill.status}
                      color={bill.status === '已完成' ? 'success' : 'warning'}
                      size="small"
                    />
                  }
                >
                  <ListItemText
                    primary={bill.description}
                    secondary={`${bill.date} · ${bill.amount}`}
                  />
                </ListItem>
                <Divider component="li" />
              </React.Fragment>
            ))}
          </List>
        </Paper>
      </Container>
    </Box>
  );
}
